<template>
  <div :class="taskFlag === 1 ? 'taskBox' : 'taskBox Details'">
    <div v-if="taskFlag === 1" class="taskSketch">
      <div class="taskSketchTop">
        <el-form ref="form" :model="formSearch" label-width="100px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="发布人：">
                <el-input
                  v-model="formSearch.startedUserName"
                  style="max-width:300px"
                /> </el-form-item></el-col>
            <el-col :span="8">
              <el-form-item label="接收人：">
                <el-input
                  v-model="formSearch.receiverName"
                  style="max-width:300px"
                /> </el-form-item></el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div style="color: transparent;">1</div>
            </el-col>
            <el-col :span="8">
              <el-form-item label="发布时间：">
                <el-date-picker
                  v-model="formSearch.startedDate"
                  type="date"
                  placeholder="选择日期"
                /> </el-form-item></el-col>
          </el-row>
        </el-form>
        <div class="taskSketchBtn">
          <el-button type="primary" @click="searchClick">搜索</el-button>
        </div>
      </div>
      <div class="taskSketchBot">
        <taskTable :table-data="tableData" @tabledblclick="tabledblclick" />
        <div class="paginationClass">
          <el-pagination
            :current-page="pagination.currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="10"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <div v-if="taskFlag === 2" class="taskDetails">
      <div class="taskDetailsTop">
        <el-button
          type="primary"
          size="medium"
          plain
          @click="goTable"
        >返回</el-button>
      </div>
      <div class="taskDetailsBot">
        <div class="taskDetailsLeft">
          <div class="leftTitle">
            <span>任务信息</span>
          </div>
          <div class="leftCon">
            <div class="leftConBox">
              <div
                v-for="(item, index) in leftList"
                :key="index"
                class="leftItem"
              >
                <div class="leftItemTop">
                  <div class="leftItemPic">
                    <img :src="item.pic" alt="">
                  </div>
                  <div class="leftItemCon">
                    <span>{{ item.title }}</span>
                  </div>
                </div>
                <p>{{ item.conText }}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="taskDetailsRight">
          <div class="rightTitle">
            <span>填写情况</span>
          </div>
          <div class="rightCon">
            <div class="rightConBox">
              <div v-for="index in 4" :key="index" class="rightItem">
                <div class="rightItemTop">
                  <el-avatar
                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                  />
                  <div class="roleClass">
                    <span>王国强</span>
                    <p :style="true ? 'color: #1492ff;' : 'color: #d40000;'">
                      已填写
                    </p>
                  </div>
                </div>
                <div v-if="index !== 2" class="itemCon">
                  <div class="rightItemTable">
                    <el-table
                      :data="rightList[0].itemTable"
                      border
                      :header-row-style="{
                        height: '36px'
                      }"
                      :row-style="{ height: '36px' }"
                      style="width: 100%"
                    >
                      <el-table-column
                        prop="date"
                        label="指标选择"
                        :show-overflow-tooltip="true"
                      />
                      <el-table-column
                        prop="name"
                        label="是否存在"
                        :show-overflow-tooltip="true"
                      />
                      <el-table-column
                        prop="address"
                        label="备注"
                        :show-overflow-tooltip="true"
                      />
                    </el-table>
                  </div>
                  <div class="rightItemPic">
                    <p>图片：</p>
                    <div>
                      <img
                        src="https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF"
                        alt=""
                      >
                      <img
                        src="https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF"
                        alt=""
                      >
                      <img
                        src="https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF"
                        alt=""
                      >
                      <img
                        src="https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF"
                        alt=""
                      >
                    </div>
                  </div>
                  <div class="rightItemFu">
                    <p>附件：</p>
                  </div>
                </div>
                <div v-if="index === 2" class="noContent">
                  <img src="@/assets/img/task/无报表插画.png" alt="">
                  <p>该用户暂未填写</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import taskTable from '@/views/taskInstance/components/TaskTabel.vue';
import { getAllModelFormData, getTableHeader, getTaskInfoByFormGuid } from '@/api/task/index.js';
export default {
  components: {
    taskTable
  },
  data() {
    return {
      taskFlag: 1,
      formSearch: {
        startedUserName: '',
        receiverName: '',
        startedDate: ''
      },
      tableData: [],
      pagination: {
        total: 10,
        currentPage: 1,
        pageIndex: 0,
        pageSize: 10
      },
      leftList: [],
      rightList: [
        {
          itemTable: [
            {
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
            },
            {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1517 弄'
            },
            {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1519 弄'
            },
            {
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1516 弄'
            }
          ]
        }
      ]
    };
  },
  created() {
    this.getFromTable();
  },
  methods: {
    searchClick(val) {
      console.log(val);
    },
    async tabledblclick(row) {
      this.taskFlag = 2;
      const obj = {
        0: require('@/assets/img/task/任务名称.png'),
        1: require('@/assets/img/task/任务状态.png'),
        2: require('@/assets/img/task/分类.png'),
        3: require('@/assets/img/task/项目时间.png'),
        4: require('@/assets/img/task/参与人.png')
      };
      await getTableHeader({ tableId: row.childrenTableId }).then(res => {
        if (res.success) {
          this.leftList = [];
          res.data.forEach((item, index) => {
            if (!item.status) {
              this.leftList.push({
                title: item.title,
                dataIndex: item.dataIndex,
                conText: '',
                pic: obj[index % 5]
              });
            }
          });
        } else {
          this.$message.warning(res.message);
        }
      });
      await getTaskInfoByFormGuid({ acceptanceFormNum: row.acceptanceFormNum }).then(res1 => {
        if (res1.success) {
          this.leftList.forEach(it => {
            it.conText = res1.data[0][it.dataIndex];
          });
        } else {
          this.$message.warning(res1.message);
        }
      });
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.getFromTable();
    },
    handleCurrentChange(val) {
      this.pagination.pageIndex = val;
      this.getFromTable();
    },
    goTable() {
      this.taskFlag = 1;
    },
    getFromTable() {
      getAllModelFormData({
        pageIndex: this.pagination.pageIndex,
        pageSize: this.pagination.pageSize,
        startedDate: this.formSearch.startedDate,
        startedUserName: this.formSearch.startedUserName,
        receiverName: this.formSearch.receiverName
      }).then(res => {
        if (res.success) {
          this.tableData = res.data;
          this.pagination.total = res.total;
        } else {
          this.$message.warning(res.message);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
$vw: 1920px;
@function px2vw($px) {
  @return $px / $vw * 100vw;
}
.taskBox {
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
  height: 100%;
  box-shadow: 0px 9px 28px 8px rgba(20, 146, 255, 0.05),
    0px 6px 16px 0px rgba(20, 146, 255, 0.08),
    0px 3px 6px -4px rgba(20, 146, 255, 0.12);
}
.taskSketch {
  height: 100%;
  .taskSketchTop {
    height: 130px;
    background: #ffffff;
    border-radius: 4px;
    padding: 10px;
    position: relative;
    .taskSketchBtn {
      position: absolute;
      top: 20px;
      right: 30px;
    }
  }
  .taskSketchBot {
    height: calc(100% - 150px);
    margin-top: 20px;
    background: #ffffff;
    border-radius: 4px;
    padding: 20px 20px 0;
  }
  .paginationClass {
    margin: 10px;
    float: right;
  }
}
.taskDetails {
  height: 100%;
  .taskDetailsTop {
    height: 60px;
    display: flex;
    align-items: center;
  }
  .taskDetailsBot {
    height: calc(100% - 80px);
    display: flex;
    justify-content: space-between;
    .taskDetailsLeft {
      width: 27%;
      background: #ffffff;
      border-radius: 4px;
      padding: 0 px2vw(20px);
      .leftTitle {
        height: 9.5%;
        display: flex;
        align-items: center;
        span {
          font-size: px2vw(18px);
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          color: #333333;
        }
      }
      .leftCon {
        height: 89%;

          overflow: auto;
        // .leftConBox {
        //   margin-top: 0.5%;
        //   height: 100%;
        // }
        .leftItem {
          min-height: px2vw(60px);
          .leftItemTop {
            display: flex;
            align-items: center;
          }
          .leftItemPic {
            width: 40px;
            img {
              float: right;
            }
          }
          .leftItemCon {
            width: calc(100% - 50px);
            span {
              font-size: px2vw(16px);
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
              color: #999999;
              letter-spacing: 0px;
              display: block;
              margin-left: 10px;
            }
          }
          p {
            margin: 0;
            font-size: px2vw(16px);
            margin-left: 50px;
            width: calc(100% - 50px);
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            color: #333333;
            letter-spacing: 0px;
            margin-bottom:px2vw(10px) ;
          }
        }
      }
    }
    .taskDetailsRight {
      width: 72%;
      background: #ffffff;
      border-radius: 4px;
      .rightTitle {
        height: 9.5%;
        display: flex;
        align-items: center;
        padding-left: 20px;
        span {
          font-size: px2vw(18px);
          font-family: PingFangSC, PingFangSC-Medium;
          font-weight: 500;
          color: #333333;
        }
      }
      .rightCon {
        padding: 0 px2vw(30px);
        height: calc(90.5% - 20px);
        overflow: auto;
        .rightConBox {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          // column-count: 2;
          // column-gap: 10px;
        }
        .rightItem {
          // vertical-align: top;
          margin-bottom: 20px;
          // display: inline-block;
          width: 48.5%;
          // break-inside: avoid;
          background: #f5f5f5;
          border-radius: 4px;
          padding: px2vw(20px);
          .rightItemTop {
            height: px2vw(50px);
            display: flex;
            /deep/.el-avatar {
              height: px2vw(50px);
              width: px2vw(50px);
            }
            .roleClass {
              height: 100%;
              margin-left: 20px;
              span {
                font-size: px2vw(16px);
                font-family: PingFangSC, PingFangSC-Regular;
                font-weight: 400;
                color: #333333;
              }
              p {
                margin: 0;
                font-size: px2vw(18px);
                font-family: PingFangSC, PingFangSC-Medium;
                font-weight: 500;
              }
            }
          }
          .itemCon {
            min-height: 200px;
          }
          .rightItemTable {
            margin-top: px2vw(20px);
          }
          .rightItemPic {
            margin-top: px2vw(20px);
            p {
              margin: 0;
              font-size: px2vw(14px);
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
              color: #999999;
              margin-bottom: px2vw(5px);
            }
            img {
              width: px2vw(48px);
              height: px2vw(48px);
            }
          }
          .rightItemFu {
            margin-top: px2vw(20px);
            p {
              margin: 0;
              font-size: px2vw(14px);
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
              color: #999999;
              margin-bottom: px2vw(5px);
            }
          }
          .noContent {
            // position: absolute;
            text-align: center;
            margin-top: px2vw(60px);
            img {
              width: px2vw(239px);
              height: px2vw(129px);
            }
            p {
              font-size: 14px;
              font-family: PingFangSC, PingFangSC-Regular;
              font-weight: 400;
              color: #999999;
              margin: 0;
            }
          }
        }
      }
    }
  }
}
.Details {
  padding: 0 20px;
}
/deep/.el-table td,
.el-table th.is-leaf {
  border-color: #eeeeee;
  // border-bottom: 1px solid #32c5ff;
}
/deep/.el-table--border th,
.el-table--border td {
  border-color: #eeeeee;
  // border-right: 2px solid #143c6e;
}
/deep/.el-table--group,
.el-table--border {
  border-color: #eeeeee;
}
/deep/.el-table__header th {
  background: #f7f8fa;
}
/deep/.vxe-body--row {
  cursor: pointer;
}
</style>
